<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button
                v-hasC="{
                    name: 'setting-source-channel-add',
                    flag: 'v1/setting/source-channel/add',
                }"
                type="primary"
                @click="handleAllocation(-1)"
                class="ivu-mb-16"
                >新增</Button
            >
            <Table
                highlight-row
                row-key="id"
                :columns="columns"
                :data="data"
                :loading="loading"
                @on-cell-click="cellclicktable"
            >
                <template slot-scope="{ row }" slot="status">
                    <Badge
                        v-if="row.status === '1'"
                        color="green"
                        text="启用"
                    />
                    <Badge v-if="row.status === '0'" color="red" text="停用" />
                </template>
                <template slot-scope="{ row }" slot="sort">
                    <span v-if="sortshow === row.id">
                        <InputNumber
                            v-width="'100%'"
                            :formatter="$inputday"
                            v-model="formItem.sort"
                            @on-change="cellchange"
                            @on-blur="cellblur"
                        ></InputNumber>
                    </span>
                    <span v-else>{{ row.sort }}</span>
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a
                        v-hasC="{
                            name: 'setting-source-channel-edit',
                            flag: 'v1/setting/source-channel/edit',
                        }"
                        @click="handleAllocation(row)"
                        >编辑</a
                    >
                    <Divider
                        type="vertical"
                        v-hasC="{
                            name: 'v1-setting-source-channel-channel-delete',
                            flag: 'v1/setting/source-channel/channel-delete',
                        }"
                    />
                    <a
                        @click="deleteTag(row)"
                        v-hasC="{
                            name: 'v1-setting-source-channel-channel-delete',
                            flag: 'v1/setting/source-channel/channel-delete',
                        }"
                        >删除</a
                    >
                </template>
            </Table>
            <div
                class="ivu-mt iuv-text-center"
                style="display:flex;justify-content: center;"
            >
                <Page
                    show-total
                    show-elevator
                    show-sizer
                    :total="total"
                    :current.sync="params.page"
                    :page-size="params.pageSize"
                    :page-size-opts="pageOpts"
                    @on-change="formSize"
                    @on-page-size-change="formChangePage"
                />
            </div>
        </Card>
        <Modal
            v-model="modal"
            :title="edit ? '编辑' : '新增'"
            @on-cancel="handleDrawerCancel('formItem')"
        >
            <Form
                :model="formItem"
                ref="formItem"
                :label-width="80"
                :rules="createRules"
            >
                <FormItem label="名称" prop="input">
                    <Input
                        v-model="formItem.input"
                        placeholder="请输入来源名称,批量新增用逗号分隔"
                    />
                </FormItem>
                <FormItem label="父节点">
                    <Select v-model="formItem.select" clearable>
                        <Option
                            v-for="item in selectlist"
                            :value="item.id"
                            :key="item.id"
                            >{{ item.source_name }}</Option
                        >
                    </Select>
                </FormItem>
                <FormItem label="排序" prop="sort">
                    <Input v-model="formItem.sort" type="number" />
                </FormItem>
                <FormItem label="状态">
                    <i-switch v-model="formItem.switch">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleDrawerCancel('formItem')">取消</Button>
                <Button
                    type="primary"
                    :loading="remarksloading"
                    @click="handleSubmit('formItem')"
                    >确定</Button
                >
            </div>
        </Modal>
    </div>
</template>
<script>
import {
    settingsourcechannelview,
    settingsourcechanneladd,
    settingsourcechanneledit,
    deleteChannel,
} from "@/api/hqapi";
export default {
    data() {
        return {
            modal: false,
            edit: true,
            loading:false,
            remarksloading: false,
            selectlist: [],
            sortshow: undefined,
            formItem: {
                input: "",
                select: "",
                sort: 1,
                switch: true,
            },
            createRules: {
                input: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                ],
                sort: [
                    {
                        required: false,
                        message: "请输入正整数",
                        pattern: /^[+]{0,1}(\d+)$/,
                        trigger: "blur",
                    },
                ],
            }, // 模态框验证规则
            columns: [
                { title: "名称", key: "source_name", tree: true },
                { title: "排序", key: "sort", slot: "sort" },
                { title: "渠道ID", key: "id",},
                { title: "状态", slot: "status" },
                { title: "操作", slot: "operation" },
            ],
            data: [],
            // 请求参数
            params: { page: 1, pageSize: 10 },
            total: 0,
            pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
        };
    },
    mounted() {
        this.initial();
    },
    methods: {
        // 初始化
        initial() {
            this.askData();
        },
        // 请求数据
        askData() {
            this.loading = true;
            settingsourcechannelview(this.params).then((res) => {
                this.total = res.total;
                for (let item of res.list) {
                    item._showChildren = true;
                }
                this.data = res.list;
                this.data.push;
                this.selectlist = res.p_list;
                this.loading = false;
            });
        },
        /* @函数功能: 分页 */
        formSize(e) {
            this.params.page = e;
            this.askData();
        },
        /* @函数功能: 每页数量 */
        formChangePage(e) {
            this.params.pageSize = e;
            this.askData();
        },
        deleteTag(row) {
            this.$Modal.confirm({
                title: "删除确认",
                content: "删除后将自动清空患者身上的该渠道，不可恢复",
                loading: true,
                onOk: () => {
                    deleteChannel({ id: row.id }).then((res) => {
                        this.$Modal.remove();
                        this.$Message.success("删除成功");
                        this.askData();
                    });
                },
            });
        },
        cellclicktable(row, v) {
            if (v.key === "sort") {
                this.sortshow = row.id;
                this.formItem = {
                    id: row.id,
                    input: row.source_name,
                    select: row.pid,
                    sort: +row.sort,
                    switch: row.status === "1",
                };
            } else {
                this.sortshow = undefined;
            }
        },
        cellblur() {
            let config = {
                channel_id: this.formItem.id,
                pid: this.formItem.select,
                status: this.formItem.switch ? 1 : 0,
                sort: this.formItem.sort,
                channel_name: this.formItem.input,
                is_builtin: 0,
            };
            settingsourcechanneledit(config).then(() => {
                this.sortshow = undefined;
                this.formItem = {
                    id: "",
                    input: "",
                    select: "",
                    sort: 1,
                    switch: true,
                };
                this.askData();
            });
        },
        handleAllocation(row) {
            if (row === -1) {
                this.edit = false;
                this.formItem = {
                    id: "",
                    input: "",
                    select: "",
                    sort: 1,
                    switch: true,
                };
            } else {
                this.edit = true;
                this.formItem = {
                    id: row.id,
                    input: row.source_name,
                    select: row.pid,
                    sort: +row.sort,
                    switch: row.status === "1",
                };
            }
            this.modal = true;
        },
        handleDrawerCancel(name) {
            this.$refs[name].resetFields();
            this.modal = false;
            this.formItem = {
                id: "",
                input: "",
                select: "",
                sort: 1,
                switch: true,
            };
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.remarksloading = true;
                    let config = {
                        channel_id: this.formItem.id,
                        pid: this.formItem.select,
                        status: this.formItem.switch ? 1 : 0,
                        sort: this.formItem.sort,
                        channel_name: this.formItem.input,
                        is_builtin: 0,
                    };
                    if (this.edit) {
                        settingsourcechanneledit(config).then(() => {
                            this.$Message.success("编辑成功");
                            this.askData();
                            this.modal = false;
                            this.remarksloading = false;
                        }).catch(()=>{
                            this.remarksloading = false;
                        });
                    } else {
                        settingsourcechanneladd(config).then(() => {
                            this.$Message.success("新增成功");
                            this.askData();
                            this.modal = false;
                            this.remarksloading = false;
                        }).catch(()=>{
                            this.remarksloading = false;
                        });
                    }
                }
            });
        },
    },
};
</script>
